import React, { Component } from 'react'
import { Card, Button, Table } from 'antd'
import table_cols from './table.jsx'
import AddRole from './add.jsx'
import SetPre from './setPre.jsx'
import { list } from '@/api/role-api.js'
/**
 * 角色管理
 */
export default class index extends Component {
  state = {
    tableData: [],
    pageNum: 1,
    pageSize: 10,
    selectObj: null,
  }
  componentDidMount() {
    this.page()
  }
  page = () => {
    list().then((v) => {
      if (v.status == 0) {
        this.setState({
          tableData: v.data,
        })
      }
    })
  }
  rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      this.setState({
        selectObj: selectedRows[0],
      })
    },
  }
  render() {
    const title = (
      <span>
        <Button
          onClick={() => this.refs.addRole.showModal()}
          type="primary"
          style={{ marginRight: '10px' }}
        >
          添加角色
        </Button>
        <Button
          onClick={() => this.refs.setPre.showModal(this.state.selectObj)}
          type={this.state.selectObj ? 'primary' : 'disabled'}
        >
          设置权限
        </Button>
      </span>
    )
    return (
      <Card title={title}>
        <Table
          rowSelection={{
            type: 'radio',
            ...this.rowSelection,
          }}
          pagination={{
            showQuickJumper: true,
            defaultCurrent: this.state.pageNum,
            defaultPageSize: this.state.pageSize,
            total: this.state.tableData.length,
            // showTotal: (total) => `总计${total}页`,
          }}
          bordered
          dataSource={this.state.tableData}
          columns={table_cols(this)}
          rowKey="name"
        />
        <AddRole ref="addRole" getList={this.page} />
        <SetPre ref="setPre" getList={this.page} />
      </Card>
    )
  }
}
